import React from 'react'
import { Button, Input, Row, Col, Form } from 'antd'
import Annotate from 'components/template/annotate'

export default {
  key: 'annotate',
  name: 'Annotate 批注',
  author: '张然',
  description: '包裹某个组件使其成为可批注组件。',
  api: [
    {
      title: 'API',
      data: [],
      description: ''
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '包裹组件即可',
      state: {
        annotateList: []
      },
      getMethod: context => {
        return {
          onAdd: text => {
            const { annotateList } = context.state;
            annotateList.push({
              createdDate: new Date().format('yyyy-MM-dd hh:mm:ss'),
              createdByUserName: '测试人员',
              text
            });
            context.setState({ annotateList })
          },
          onDelete: index => {
            const { annotateList } = context.state;
            annotateList.splice(index, 1);
            context.setState({ annotateList })
          }
        }
      },
      getContent: context => {
        const { annotateList } = context.state;
        return (
          <div>
            <Annotate
              annotateList={annotateList}
              onAdd={context.onAdd}
              onDelete={context.onDelete}
            >
              <div>
                这是一段可以批注的话
              </div>
            </Annotate>
          </div>
        )
      }
    },
    {
      title: '模式切换',
      description: '设置::mode::切换不同的显示模式',
      state: {
        annotateList: []
      },
      getMethod: context => {
        return {
          onAdd: text => {
            const { annotateList } = context.state;
            annotateList.push({
              createdDate: new Date().format('yyyy-MM-dd hh:mm:ss'),
              createdByUserName: '测试人员',
              text
            });
            context.setState({ annotateList })
          },
          onDelete: index => {
            const { annotateList } = context.state;
            annotateList.splice(index, 1);
            context.setState({ annotateList })
          }
        }
      },
      getContent: context => {
        const { annotateList } = context.state;
        return (
          <div>
            <Annotate
              annotateList={annotateList}
              onAdd={context.onAdd}
              onDelete={context.onDelete}
            >
              <div>
                批注直接显示在下方
              </div>
            </Annotate>
            <br/>
            <Annotate
              annotateList={annotateList}
              onAdd={context.onAdd}
              onDelete={context.onDelete}
              mode='hover'
            >
              <div>
                批注鼠标悬停才会显示
              </div>
            </Annotate>
          </div>
        )
      }
    }
  ]
}
